<template>
    <view>
        <view class="header">
            <view style="width: 100%;height: 30rpx;"></view>
            <view class="circle">
                <l-circle :current.sync="modelVale" :percent="target" :dashboard="true">
                    <text style="font-size: 24rpx;color: #fff;">{{ modelVale }}%</text>
                </l-circle>
            </view>
            <view style="font-size: 28rpx;text-align: center;color: #fff;">云空间内存5000/10000(M)</view>
        </view>
        <view class="item">
            <view>密码</view>
            <view><input type="password" placeholder="请输入原密码"></view>
        </view>
        <view class="item">
            <view>修改密码</view>
            <view><input type="password" placeholder="请输入新密码"></view>
        </view>
        <view class="item">
            <view>确认密码</view>
            <view><input type="password" placeholder="请确认密码"></view>
        </view>
        <view class="submit" @click="submit">确认</view>
    </view>
</template>

<script>
export default {
    components: {},
    props: {},
    data() {
        return {
            modelVale: 0,
            target: 50
        };
    },
    watch: {},
    methods: {},
    onShow() { },
    onLoad(option) {
        console.log(option)
    },
};
</script>
<style scoped lang='scss'>
.header {
    width: 100%;
    margin: auto;
    height: 360rpx;
    background-color: $uni-color-primary;

    .circle {
        width: 260rpx;
        height: 260rpx;
        margin: auto;
        // margin-top: 30rpx;
    }
}

.item {
    width: 100%;
    padding-left: 30rpx;
    height: 100rpx;
    line-height: 100rpx;
    border-bottom: 1px solid #efefef;
    display: flex;

    view:nth-child(1) {
        width: 50%;
    }

    view:nth-child(2) {
        width: 50%;
        padding-right: 60rpx;

        input {
            width: 100%;
            height: 100%;
            text-align: right;

        }

        // height: 100%;
    }
}

.submit {
    width: 94%;
    height: 90rpx;
    background-color: $uni-color-primary;
    border-radius: 50rpx;
    margin: auto;
    margin-top: 130rpx;
    text-align: center;
    line-height: 90rpx;
    color: #fff;
}
</style>